<template>
	<!-- 乘车人信息 -->
	<view class="passenger_list">
		<view class="tip">购票人需提供每一名乘车旅客本人使用的手机号码，为了方便您为他人购票，请您提前填报并通知乘客旅客协助核验。</view>
		<view class="list" v-if="passengerList.length">
			<view class="item" v-for="item in passengerList" :key="item.phone">
				<view class="top" @click="passengerClick" data-type="delete" :data-item="item">
					<text class="name">{{ item.name }}</text>
					<text class="type">{{ item.passengerType | formatTicketType }}</text>
				</view>
				<view class="bottom">
					<view class="cert_no">身份证:{{ item.certNo | formatCertNo }}</view>
					<view class="phone">手机号:{{ item.phone }}</view>
				</view>
				<view data-type="edit" :data-item="item" @click="passengerClick"><uni-icons class="edit" type="compose" size="20" color="#1966FF"></uni-icons></view>
			</view>
		</view>
		<view v-else class="loading"><my-loading loading-type="no_data" :loading-text="loadingText" :refresh-btn="false"></my-loading></view>
		<view class="btn_wraper_add">
			<view class="btn" @click="passengerClick" data-type="add">
				<view class="btn_icon"></view>
				<view class="btn_text">新增乘车人</view>
			</view>
		</view>
	</view>
</template>

<script>
// components
import uniIcons from '@dcloudio/uni-ui/lib/uni-icons/uni-icons.vue';
import myLoading from '@/components/myLoading/myLoading.vue';
// api
import { $getPassenger, $deletePassenger } from '../../service/index';
// utils
import { myShowToast, myShowModal} from '../../utils/utils.js';
export default {
	components: { uniIcons ,myLoading},
	data() {
		return {
			passengerList: [], // 乘客列表
			loadingText:"尚未添加乘车人",
		};
	},
	filters: {
		formatTicketType(val) {
			const types = {
				ADULT: '成人票',
				CHILD: '儿童票',
				STUDENT: '学生票',
				SOLDIER: '军人票'
			};
			return types[val] || '';
		},
		formatCertNo(val) {
			const len = val.length;
			return val.substring(0, 4) + ' **** **** ' + val.substring(len - 4, len);
		}
	},
	methods: {
		// 添加/编辑乘客人
		passengerClick(e) {
			const type = e.currentTarget.dataset.type;
			switch (type) {
				case 'delete':
					uni.showModal({
						title: '提示',
						content: '确定要删除该乘车人信息吗?',
						success: res => {
							if (res.confirm) {
								this.deletePassenger(e.currentTarget.dataset.item.id);
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
					break;
				case 'edit':
					uni.navigateTo({ url: `/center/addPassenger/addPassenger?type=${type}&id=${e.currentTarget.dataset.item.id}` });
					break;
				case 'add':
					uni.navigateTo({ url: `/center/addPassenger/addPassenger?type=${type}` });
					break;
				default:
					break;
			}
		},
		// 获取乘车人列表
		getPassenger() {
			$getPassenger()
				.then(res => {
					const data = res.data;
					if (!data.success) {
						myShowModal(data.message || '网络错误');
						this.loadingText = '查询失败'
						return;
					}
					this.passengerList = data.content || [];
				})
				.catch(err => {
					this.loadingText = '查询失败'
					console.log(err);
				});
		},
		// 删除乘车人
		deletePassenger(id) {
			$deletePassenger({}, id)
				.then(res => {
					const data = res.data;
					if (!data.success) {
						myShowModal(data.message || '网络错误');
						return;
					}
					myShowToast('删除成功');
					const passengerList = this.passengerList;
					const index = passengerList.findIndex(item => item.id === id);
					index != -1 ? this.passengerList.splice(index, 1) : '';
				})
				.catch(err => {
					console.log(err);
				});
		}
	},
	onShow() {
		this.getPassenger(); // 获取乘车人列表
	}
};
</script>

<style lang="scss" scoped>
.passenger_list {
	.tip {
		background: rgba(255, 147, 7, 0.1);
		font-size: 24rpx;
		font-weight: 600;
		color: rgba(255, 147, 7, 1);
		padding: 24rpx 63rpx 24rpx 40rpx;
		height: 60rpx;
		overflow: hidden;
	}
	.list {
		padding: 0 40rpx;
		// height: calc(100vh - 288rpx);
		// overflow-y: scroll;	
		.item {
			border-bottom: 1rpx solid #d1d7e1;
			position: relative;
			.top {
				padding: 24rpx 0 14rpx 0;
				height: 28rpx;
				.name {
					font-size: 28rpx;
					font-weight: bold;
					color: rgba(51, 51, 51, 1);
					margin-right: 29rpx;
				}
				.type {
					height: 28rpx;
					line-height: 28rpx;
					display: inline-block;
					border: 1rpx solid rgba(130, 141, 162, 1);
					border-radius: 4rpx;
					font-size: 20rpx;
					padding: 0 7rpx;
					font-weight: 500;
					color: rgba(130, 141, 162, 1);
					vertical-align: 2rpx;
				}
			}
			.bottom {
				line-height: 30rpx;
				padding-bottom: 39rpx;
				.cert_no {
					display: inline-block;
					font-size: 20rpx;
					font-weight: 500;
					color: rgba(139, 150, 172, 1);
					margin-right: 46rpx;
				}
				.phone {
					display: inline-block;
					font-size: 20rpx;
					font-family: Adobe Heiti Std;
					font-weight: normal;
					color: rgba(139, 150, 172, 1);
				}
			}
			.edit {
				position: absolute;
				right: 0;
				top: 55rpx;
			}
		}
	}
	.btn_wraper_add {
		// position: fixed;
		// bottom: 0;
		margin: 50rpx 0;
		// width: 100%;
		.btn {
			padding: 0;
			width: 560rpx;
			height: 80rpx;
			margin: 0 auto;
			line-height: 80rpx;
			font-weight: 500;
			background: linear-gradient(90deg, rgba(34, 100, 255, 1) 0%, rgba(52, 133, 255, 1) 99%);
			box-shadow: 0rpx 6rpx 16rpx 0rpx rgba(230, 235, 244, 0.8);
			border-radius: 40rpx;
			text-align: center;
			color: #ffffff;
			.btn_icon {
				display: inline-block;
				margin-right: 16rpx;
				position: relative;
				top: 5rpx;
				width: 32rpx;
				height: 32rpx;
			}
			.btn_text {
				display: inline-block;
				font-size: 32rpx;
			}
			.btn_icon::before {
				content: ' ';
				position: absolute;
				left: 12rpx;
				width: 4rpx;
				height: 28rpx;
				border-radius: 2rpx;
				background-color: #ffffff;
			}
			.btn_icon::after {
				content: ' ';
				position: absolute;
				left: 0;
				top: 12rpx;
				width: 28rpx;
				height: 4rpx;
				border-radius: 2rpx;
				background-color: #ffffff;
			}
		}
		.btn_hover {
			color: #aac8ff !important;
		}
	}
}
</style>
